<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 登入表单卡片 -->
		<view class="login-card">
			<!-- 图标 -->
			<view class="login-image">
				<!-- 图片 -->
				<image style="width: 80%;height: 80%;" src="../../static/register.svg"></image>
				<!-- 页面名称 -->
				<view class="card-title">
					注册
				</view>
			</view>
			<!-- 表单 -->
			<view class="login-form">
				<!-- 昵称 -->
				<view class="login-input">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>昵称</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/nick.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input type="text" v-model="state.nickName" placeholder="请输入你的昵称">
						</view>
					</view>
				</view>
				<!-- 账号 -->
				<view class="login-input pass">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>手机号</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/phone.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input type="text" v-model="state.registerPhone" placeholder="请输入手机号">
						</view>
					</view>
				</view>
				<!-- 密码-->
				<view class="login-input pass">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>密码</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/password.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input type="text" v-model="state.registerPassword" placeholder="请输入密码" password="true">
						</view>
					</view>
				</view>
				<!-- 密码-->
				<view class="login-input pass">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>确认密码</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/password.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input type="text" v-model="state.newRegisterPassword" placeholder="请再次输入密码" password="true">
						</view>
					</view>
				</view>
				<!-- 注册按钮 -->
				<view class="submit" @click="getRegister">
					<view class="submit-button">
						注册
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive } from "vue";
const state = reactive({
	nickName:'',
	registerPhone:'',
	registerPassword:'',
	newRegisterPassword:''
})
onMounted(()=>{
	console.log(123)
})
// 发起注册请求
const getRegister = () =>{
	let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
	let result = re.test(state.registerPhone);
	if(!result){
		// 轻提示“请输入正确的手机号”
		console.log(1);
	}else if(state.registerPassword !== state.newRegisterPassword){
		// 轻提示“两次输入密码不一样”
		console.log(2)
	}else{
		console.log(3)
		let obj = {};
		obj.tel = state.registerPhone;
		obj.username = state.nickName;
		obj.password = state.registerPassword;
		console.log(obj)
		uni.request({
			url:'http://124.221.162.230:8888/account/register',
			method:"POST",
			data:obj,
			success: (res) => {
				console.log(res)
				uni.navigateTo({
					url:'/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		})
	}
}

</script>

<style lang="less" scoped>
	.out-box {
		height: 100vh;
		width: 100vw;
		background: #F3F9FF;
		overflow: hidden;
		position: relative;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}

		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}

		.login-card {
			position: absolute;
			top: 20%;
			left: 0;
			width: 100vw;
			height: 80%;
			background-color: #ffffff;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			box-shadow: 6px 6px 6px 6px rgba(240, 240, 240, 0.425);

			.login-image {
				position: absolute;
				height: 180rpx;
				width: 180rpx;
				top: -90rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #ffffff;
				border-radius: 40rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgb(255, 245, 253, 0.225);
				display: flex;
				justify-content: center;
				align-items: center;

				.card-title {
					position: absolute;
					top: -70rpx;
					left: 50%;
					font-size: 42rpx;
					font-weight: 700;
					transform: translateX(-50%);
				}
			}

			.login-form {
				margin-top: 120rpx;
				width: 100%;
				height: calc(100% - 120rpx);

				.login-input {
					transition: all 0.7s;

					.login-title {
						color: rgb(0, 22, 72);
						font-size: 36rpx;
						font-weight: 700;
						margin-left: 5%;
					}

					.input-box {
						margin-top: 20rpx;
						width: 90%;
						margin-left: 5%;
						height: 100rpx;
						border-radius: 20rpx;
						background-color: #fbfbfd;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						padding-right: 20rpx;
						box-sizing: border-box;

						.input-icon {
							height: 80rpx;
							width: 100rpx;
							background-color: rgba(108, 86, 249, 0.05);
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.input-scanf {
							margin-left: 40rpx;
							width: calc(100% - 200rpx);
							height: 80rpx;
							display: flex;
							align-items: center;

							input {
								height: 60rpx;
								width: 100%;
								font-size: 30rpx
							}
						}

						.input-check {
							width: calc(100% - 300rpx);
						}

						.input-send {
							width: 200rpx;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-weight: 700;
							background-color: rgba(0, 40, 132, 0.1);
							border-radius: 30rpx;
						}

						.input-send-color {
							transition: all 0.3s;
							background-color: rgba(0, 40, 132, 0.2);
						}
					}
				}


				.submit {
					margin-top: 40rpx;
					display: flex;
					justify-content: center;

					.submit-button {
						color: #ffffff;
						font-size: 38rpx;
						width: 70%;
						height: 100rpx;
						background: linear-gradient(to right top, rgb(48, 210, 200), rgb(56, 191, 218));
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 60rpx;
					}
				}

				.pass {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
